<template>
    <view style="width: 100%;">
        <unicloud-db ref="udb" v-slot:default="{ data }" collection="menu" orderby="created asc" where="delete != true"
            @load="loadSuccess">
            <x-skeleton type="text" :loading="loading" :config="{ padding: '16px' }">
                <uni-swipe-action ref="swipe">
                    <uni-swipe-action-item :left-options="options" @click="actionClick($event, item)"
                        v-for="item in data" :key="item.id" :auto-close="false">
                        <view class="swipe-action u-border-top u-border-bottom">
                            <view class="swipe-action__content">
                                <text class="swipe-action__content__text">{{ item.name }}</text>
                            </view>
                        </view>
                    </uni-swipe-action-item>
                </uni-swipe-action>
            </x-skeleton>
        </unicloud-db>
        <uni-popup ref="popup" border-radius="10px 10px 0 0" background-color="#fff" :mask-click="true">
            <uni-card>
                <uni-forms ref="uniForm" :model="form" :rules="rules">
                    <uni-forms-item label="名称" name="name" required>
                        <uni-easyinput type="text" focus v-model="form.name" placeholder="请输入新名称"></uni-easyinput>
                    </uni-forms-item>
                </uni-forms>
                <button type="primary" class="uni-button" @click="submit" style="margin-bottom: 1rem">提交</button>
                <button type="error" class="uni-button" @click="$refs.popup.close">取消</button>
            </uni-card>

        </uni-popup>
        <button type="primary" class="uni-button" @click="addMenu">添加分类</button>
    </view>
</template>

<script>

export default {
    data() {
        return {
            loading: true,
            form: {
                name: '',
                id: null,
            },
            rules: {
                name: {
                    rules: [
                        // 校验 name 不能为空
                        {
                            required: true,
                            errorMessage: '请填写姓名',
                        },
                        // 对name字段进行长度验证
                        {
                            minLength: 1,
                            maxLength: 18,
                            errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
                        }
                    ],

                }
            },
            options: [{
                text: '编辑',
                type: 'edit',
                style: {
                    backgroundColor: '#007aff'
                }
            },
            {
                text: '删除',
                type: 'delete',
                style: {
                    backgroundColor: '#dd524d'
                }
            },
            ],
        }
    },
    onPullDownRefresh() {
        this.$refs.udb.loadData({
            clear: true
        }, () => {
            uni.stopPullDownRefresh()
        })
    },
    methods: {
        loadSuccess() {
            this.loading = false
        },
        addMenu() {
            this.$refs.popup.open('bottom')
            this.form = {}
        },
        async actionClick(e, data) {
            this.$refs['swipe'].closeAll()
            uni.showLoading({
                mask: true
            })
            switch (e.content.type) {
                case 'edit':
                    this.form = JSON.parse(JSON.stringify(data))
                    setTimeout(() => {
                        this.$refs['popup'].open('bottom')
                    }, 200);

                    break;
                case 'delete':
                    this.loading = true
                    await this.db('menu').remove({
                        where: { id: data.id }
                    })
                    this.$refs['udb'].refresh()
                    break;
            }
            setTimeout(() => {
                uni.hideLoading();
            }, 200);


        },
        async submit() {
            try {
                const { name } = await this.$refs.uniForm.validate();
                uni.showLoading({
                    mask: true
                })
                const {
                    _id
                } = this.form

                if (_id) {
                    await this.db('menu').update({ where: { _id }, data: { name }, toast: true })
                } else {
                    await this.db('menu').add({ data: { name }, toast: true })
                }
                this.$refs.udb.refresh()
                this.$refs.popup.close()
                this.loading = true

            } catch (error) {
                console.error(error)
                // handle error here
            } finally {
                uni.hideLoading();

            }

        }
    },

}
</script>

<style lang="less" scoped>
.popup {
    padding: 1rem;
}

page {
    background-color: #efeff4;
}

.u-page {
    padding: 0;
}

.u-demo-block__title {
    padding: 10px 0 2px 15px;
}

.swipe-action {
    &__content {
        padding: 25rpx 0;

        &__text {
            font-size: 15px;
            padding-left: 30rpx;
        }
    }
}
</style>